import React from 'react';

import { DualAxes } from '@ant-design/charts';

const ChartsManage = ({ salesData }) => {
  const uvBillData = [
    {
      storeName: '资中归德店',
      type: '刷卡开卡金额',
      value: 5,
    },
    {
      storeName: '资中归德店',
      type: '刷卡开卡笔数',
      value: 4,
    },
    {
      storeName: '资中归德店',
      type: '现金开卡金额',
      value: 1,
    },
    {
      storeName: '资中归德店',
      type: '现金开卡笔数',
      value: 11,
    },
    {
      storeName: '资中归德店',
      type: '第三方支付开卡金额',
      value: 12,
    },
    {
      storeName: '资中归德店',
      type: '第三方开卡笔数',
      value: 4,
    },
    {
      storeName: '后勤文员',
      type: '刷卡开卡金额',
      value: 5,
    },
    {
      storeName: '后勤文员',
      type: '刷卡开卡笔数',
      value: 4,
    },
  ];
  const transformData = [
    {
      storeName: '资中归德店',
      type: '现金开卡金额',
      count: 5,
    },
    {
      storeName: '后勤文员',
      type: '现金开卡金额',
      count: 1,
    },
    {
      storeName: '后勤文员',
      type: '现金开卡笔数',
      count: 11,
    },
    // {
    //   time: '2',
    //   count: 400,
    // },
    // {
    //   time: '5',
    //   count: 380,
    // },
    // {
    //   time: '3',
    //   count: 220,
    // },
  ];
  const config = {
    height: 600,
    padding: [20, 20, 20, 20],
    data: [
      salesData.BillData ? salesData.BillData : uvBillData,
      salesData.LineData ? salesData.LineData : transformData,
    ],
    xField: 'storeName',
    yField: ['value', 'count'],
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.4,
        label: {},
        color: ['#5B8FF9', '#5D7092', '#99BCFA', '#5B8FF9', '#5D7092', '#99BCFA'],
      },
      {
        geometry: 'line',
        seriesField: 'type',
        color: ['#5AD8A6', 'red'],
      },
    ],
    interactions: [{ type: 'element-highlight' }, { type: 'active-region' }],

    legend: {
      custom: true,
      position: 'bottom',
      items: [
        {
          value: '刷卡开卡金额',
          name: '刷卡开卡金额',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5B8FF9',
              r: 5,
            },
          },
        },
        {
          value: '刷卡开卡笔数',
          name: '刷卡开卡笔数',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5D7092',
              r: 5,
            },
          },
        },
        {
          value: '现金开卡金额',
          name: '现金开卡金额',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5AD8A6',
              r: 5,
            },
          },
        },
        {
          value: '现金开卡笔数',
          name: '现金开卡笔数',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5AD8A6',
              r: 5,
            },
          },
        },
        {
          value: '第三方支付开卡金额',
          name: '第三方支付开卡金额',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5AD8A6',
              r: 5,
            },
          },
        },
        {
          value: '第三方开卡笔数',
          name: '第三方开卡笔数',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5AD8A6',
              r: 5,
            },
          },
        },
      ],
    },
  };
  return <DualAxes {...config} />;
};

export default ChartsManage;
